import React from 'react'
import { Card, Tabs, Form, Input, Button, Switch, Select, message } from 'antd'
import { useBreakpoint } from '@/hooks/useBreakpoint'
import BottomNavigation from '@/components/navigation/BottomNavigation'
import './style.css'

const { TabPane } = Tabs

const SettingsPage: React.FC = () => {
  const [form] = Form.useForm()
  const breakpoint = useBreakpoint()
  const isMobile = breakpoint === 'mobile'

  const onFinish = (values: any) => {
    console.log('Settings saved:', values)
    message.success('设置已保存')
  }

  return (
    <div className={`settings-container ${isMobile ? 'mobile' : 'desktop'}`}>
      <h1 className={`font-bold mb-6 ${isMobile ? 'text-xl' : 'text-2xl'}`}>系统设置</h1>

      <Card>
        <Tabs
          defaultActiveKey="general"
          tabPosition={isMobile ? 'top' : 'top'}
          size={isMobile ? 'large' : 'middle'}
        >
          <TabPane tab="常规设置" key="general">
            <Form
              form={form}
              layout="vertical"
              size={isMobile ? 'large' : 'middle'}
              onFinish={onFinish}
              initialValues={{
                language: 'zh-CN',
                theme: 'light',
                notifications: true,
              }}
            >
              <Form.Item label="语言" name="language">
                <Select
                  style={{
                    fontSize: isMobile ? '16px' : '14px',
                    minHeight: isMobile ? '44px' : '32px'
                  }}
                >
                  <Select.Option value="zh-CN">简体中文</Select.Option>
                  <Select.Option value="en-US">English</Select.Option>
                </Select>
              </Form.Item>

              <Form.Item label="主题" name="theme">
                <Select
                  style={{
                    fontSize: isMobile ? '16px' : '14px',
                    minHeight: isMobile ? '44px' : '32px'
                  }}
                >
                  <Select.Option value="light">浅色主题</Select.Option>
                  <Select.Option value="dark">深色主题</Select.Option>
                </Select>
              </Form.Item>

              <Form.Item label="启用通知" name="notifications" valuePropName="checked">
                <Switch style={{ transform: isMobile ? 'scale(1.2)' : 'scale(1)' }} />
              </Form.Item>

              <Button
                type="primary"
                htmlType="submit"
                block={isMobile}
                style={{ minHeight: isMobile ? '44px' : '32px' }}
              >
                保存设置
              </Button>
            </Form>
          </TabPane>

          <TabPane tab="API密钥" key="api">
            <Form
              layout="vertical"
              size={isMobile ? 'large' : 'middle'}
            >
              <Form.Item label="OpenAI API Key" name="openai_key">
                <Input.Password
                  placeholder="sk-..."
                  style={{
                    fontSize: isMobile ? '16px' : '14px',
                    minHeight: isMobile ? '44px' : '32px'
                  }}
                />
              </Form.Item>

              <Form.Item label="Claude API Key" name="claude_key">
                <Input.Password
                  placeholder="sk-ant-..."
                  style={{
                    fontSize: isMobile ? '16px' : '14px',
                    minHeight: isMobile ? '44px' : '32px'
                  }}
                />
              </Form.Item>

              <Form.Item label="文心一言 API Key" name="wenxin_key">
                <Input.Password
                  placeholder="输入您的API密钥"
                  style={{
                    fontSize: isMobile ? '16px' : '14px',
                    minHeight: isMobile ? '44px' : '32px'
                  }}
                />
              </Form.Item>

              <Button
                type="primary"
                block={isMobile}
                style={{ minHeight: isMobile ? '44px' : '32px' }}
              >
                保存密钥
              </Button>
            </Form>
          </TabPane>

          <TabPane tab="账户安全" key="security">
            <Form
              layout="vertical"
              size={isMobile ? 'large' : 'middle'}
            >
              <Form.Item label="当前密码" name="current_password">
                <Input.Password
                  style={{
                    fontSize: isMobile ? '16px' : '14px',
                    minHeight: isMobile ? '44px' : '32px'
                  }}
                />
              </Form.Item>

              <Form.Item label="新密码" name="new_password">
                <Input.Password
                  style={{
                    fontSize: isMobile ? '16px' : '14px',
                    minHeight: isMobile ? '44px' : '32px'
                  }}
                />
              </Form.Item>

              <Form.Item label="确认新密码" name="confirm_password">
                <Input.Password
                  style={{
                    fontSize: isMobile ? '16px' : '14px',
                    minHeight: isMobile ? '44px' : '32px'
                  }}
                />
              </Form.Item>

              <Button
                type="primary"
                block={isMobile}
                style={{ minHeight: isMobile ? '44px' : '32px' }}
              >
                更新密码
              </Button>
            </Form>
          </TabPane>
        </Tabs>
      </Card>

      {/* 移动端底部导航 */}
      {isMobile && <BottomNavigation activeKey="profile" />}
    </div>
  )
}

export default SettingsPage